import { useMemo, useState } from 'react';

export default (props: any) => {
  const [hasError, setHasError] = useState(false);

  const commands = useMemo(() => {
    try {
      setHasError(false);
      const command_json = JSON.parse(props.item.content);
      // return JSON.stringify(command_json)
      return command_json;
    } catch (e) {
      setHasError(true);
      return '命令解析失败';
    }
    // return props.item.content
  }, [props.item]);

  const CommandLayout = () => {
    // if (hasError) {
    //   return <div style={{ color: 'red' }}>命令解析失败</div>;
    // } else {
    //   const result = commands
    //     .map((command) => {
    //       return '步骤' + command.step + '：' + command.description;
    //     })
    //     .join(' -> ');
    //   return result;
    // }
    if (hasError) {
      return <div style={{ color: 'red' }}>命令执行失败</div>;
    }
    return <div>命令执行成功！</div>
  };

  return (
    <>
      <CommandLayout />
      {/* <div style={hasError ? { color: 'red' } : {}}>{commands}</div> */}
    </>
  );
};
